<script src="https://cdn.bootcss.com/countup.js/1.9.3/countUp.js"></script>

<style>
    .bootstrap-select{
        width: 100% !important;
    }
    .glyphicon-arrow-up{
        color: red;
    }

    .glyphicon-arrow-down{
        color: #76d471;
    }
    #refreshs{
        position:fixed;
        top: 200px;

        width: 150px;
        border: 1px solid #cccccc;
        border-right: none;
        border-radius:5px 0 0 5px;
        background: #ffffff;
        padding: 10px 5px;
        z-index: 999;
    }
    .arrows{
        position: absolute;
        left: -41px;
        top: -10px;
        width: 40px;
        height: 40px;
        line-height:40px;
        text-align: center;
        border: 1px solid #ffffff;
        background: #62a6f5;
        cursor: pointer;
    }
    .refreshss{
        cursor: pointer;
        background: #62a6f5;
        position: absolute;
        left: -41px;
        top:30px;
        width: 40px;
        height: 40px;
        line-height:40px;
        text-align: center;
        border: 1px solid #ffffff;
    }
    .col-md-2 {
        width: 14% !important;
    }
    .refreshsss{
        top: 70px;
    }
</style>
<div id="refreshs" style="right:0px;">
    <div class="arrows"><span style="color:#ffffff;font-size: 16px;" class="glyphicon glyphicon-arrow-right"></span></div>
    <div class="refreshss" onclick="refreshs('refresh')"><span style="color:#ffffff;font-size: 16px;" class="glyphicon glyphicon-refresh"></span></div>
    <div class="refreshss refreshsss" onclick="refreshs('play')">
        <span style="color:#ffffff;font-size: 16px;" class="fa fa-pause"></span>
    </div>
    <form class="layui-form" action="">
        <div class="row">
            <div class="col-md-10 col-md-offset-1" >
                <select style="height: 0" id="select" title="所有平台" multiple  onchange="selectChange()"></select>
            </div>
        </div>
        <div class="row" style="margin-top: 10px;">
            <div class="col-md-10 col-md-offset-1" >
                <input type="text" class="layui-input" placeholder="选择时间范围" autocomplete="off" id="date">
            </div>
        </div>

    </form>
</div>

<div class="container-fluid">
<div class="row" style="margin-top: 10px;">
    <#if shiro.hasPermission("data:daily:ipCount")>
    <div class="stats_box col-xs-6 col-md-2 " id="stats5">
        <div class="stats_title">
            IP数
        </div>
        <div class="stats_amount" id="stats5_num">
            0
        </div>
        <div class="stats_contrast">
            同比<span class="stats_contrast_num">0%</span><span class="glyphicon" ></span>
        </div>
    </div>
</#if>
    <#if shiro.hasPermission("data:daily:lockedDomain")>
    <div class="stats_box col-md-2 " id="stats7">
        <div class="stats_title">
            被封域名数
        </div>
        <div class="stats_amount" id="stats7_num">
            0
        </div>
        <div class="stats_contrast">
            同比<span class="stats_contrast_num">0%</span><span class="glyphicon" ></span>
        </div>
    </div>
</#if>
<#if shiro.hasPermission("data:daily:newUser")>
    <div class="stats_box col-xs-6 col-md-2 " id="stats2">
        <div class="stats_title">
            新增用户数
        </div>
        <div class="stats_amount" id="stats2_num">
            0
        </div>
        <div class="stats_contrast">
            同比<span class="stats_contrast_num">0%</span><span class="glyphicon" ></span>
        </div>
    </div>
</#if>
<#if shiro.hasPermission("data:daily:activeUser")>
    <div class="stats_box col-xs-6 col-md-2 " id="stats3">
        <div class="stats_title">
            活跃用户数
        </div>
        <div class="stats_amount" id="stats3_num">
            0
        </div>
        <div class="stats_contrast">
            同比<span class="stats_contrast_num">0%</span><span class="glyphicon" ></span>
        </div>
    </div>
</#if>
<#if shiro.hasPermission("data:daily:newArticle")>
    <div class="stats_box col-xs-6 col-md-2 " id="stats6">
        <div class="stats_title">
            文章新增数
        </div>
        <div class="stats_amount" id="stats6_num">
            0
        </div>
        <div class="stats_contrast">
            同比<span class="stats_contrast_num">0%</span><span class="glyphicon" ></span>
        </div>
    </div>
</#if>
<#if shiro.hasPermission("data:daily:forwardArticle")>
    <div class="stats_box col-xs-6 col-md-2 "  id="stats4">
        <div class="stats_title">
            转发文章数
        </div>
        <div class="stats_amount" id="stats4_num">
            0
        </div>
        <div class="stats_contrast">
            同比<span class="stats_contrast_num">0%</span><span class="glyphicon" ></span>
        </div>
    </div>
</#if>
<#if shiro.hasPermission("statsDetails2:SharedArticleNum:showText")>
<div class="stats_box col-xs-6 col-md-2 "  id="stats9">
    <div class="stats_title">
        转发文章次数
    </div>
    <div class="stats_amount" id="stats9_num">
        0
    </div>
    <div class="stats_contrast">
        同比<span class="stats_contrast_num">0%</span><span class="glyphicon" ></span>
    </div>
</div>
</#if>
<!--<#if shiro.hasPermission("data:daily:ArticlePeople")>-->
<!--<div class="stats_box col-xs-6 col-md-2 "  id="stats8">-->
    <!--<div class="stats_title">-->
        <!--转发文章人数-->
    <!--</div>-->
    <!--<div class="stats_amount" id="stats8_num">-->
        <!--0-->
    <!--</div>-->
    <!--<div class="stats_contrast">-->
        <!--同比<span class="stats_contrast_num">0%</span><span class="glyphicon" ></span>-->
    <!--</div>-->
<!--</div>-->
<!--</#if>-->
<!--</div>-->
</div>

<script>
    <!--每日统计-->
    function refreshs(type){
        if(_date!=''){
            _enddate = _date.replace(/\s+/g,"").split('到')[1];
            _startdate = _date.replace(/\s+/g,"").split('到')[0];
        }
        data_id  = $('#select').val();
        statsInit(data_id,_startdate,_enddate);

        chartPage.init(data_id,_startdate,_enddate);
        window.clearInterval(getdata);
       if(type == 'refresh'){
            $(".refreshsss span").removeClass("fa-play").addClass("fa-pause");
            indexTimer = true;
           getdata = window.setInterval(function(){
               if($(window.parent.document).find(".page-tabs-content .active").attr('data-id')!='modules/view/dailyStatistics.html'){
                   return;
               }
               statsInit(data_id,_startdate,_enddate);
               chartPage.init(data_id,_startdate,_enddate);
           },1000*60)
        }
        if(type == 'play'){
            if(!indexTimer){
                $(".refreshsss span").removeClass("fa-play").addClass("fa-pause");
                indexTimer = true;
                getdata = window.setInterval(function(){
                    if($(window.parent.document).find(".page-tabs-content .active").attr('data-id')!='modules/view/dailyStatistics.html'){
                        return;
                    }
                    statsInit(data_id,_startdate,_enddate);
                    chartPage.init(data_id,_startdate,_enddate);
                },1000*60)
            }else{
                $(".refreshsss span").addClass("fa-play").removeClass("fa-pause");
                indexTimer = false;
            }
        }
    }
    var getdata = null;
    var statsData = false;
    var data_id=null;   //选中id
    var _date="";      //时间
    var _startdate='';  //开始时间
    var _enddate="";   //结束时间
    var indexloading = null;
    var indexTimer = false;

    $(function(){
        refreshs('refresh')
        $('.arrows').click(function(){
            if($('#refreshs').css('right')=='0px'){
                $('.arrows span').removeClass('glyphicon-arrow-right').addClass('glyphicon-arrow-left');
                $('#refreshs').animate({
                    right:'-150px'
                })
            }else{
                $('.arrows span').removeClass('glyphicon-arrow-left').addClass('glyphicon-arrow-right');
                $('#refreshs').animate({
                    right:'0px'
                })
            }

        })
        $('#dateselect .btn').each(function(index){
            $(this).click(function(){
                $('#dateselect .btn').removeClass('btn-primary');
                $(this).addClass('btn-primary')
                if(index==0){
                    dateselect = 'minute';
                }else if(index==1){
                    dateselect = 'semih';
                }else if(index==2){
                    dateselect = 'hour';
                }
                refreshs('refresh')
            })
        })
        layui.use(['form','laydate'], function(){
            var form = layui.form;
            var laydate = layui.laydate;
            laydate.render({
                elem: '#date',
                range: '到',
                position:'fixed',
                done: function(value, date, endDate){
                    _date =value;
                    setTimeout(function(){
                        if($('#date').val()!=""){
                            refreshs('refresh')
                        }
                    },500)

                }
            });




            $.ajax({
                type : "get",
                url : baseURL+"platform/findAllPlatform",
                cache : false,
                contentType : false,
                processData : false,
                dataType : "json",
                success: function(data) {
                    statsData = false;
                    if(data.code==0){
                        var _html = ''
                        for(var i=0;i<data.platformList.length;i++){
                            _html = _html + '<option value="'+data.platformList[i].platformId+'">'+data.platformList[i].nickName+'</option>'
                        }
                        //console.log(_html,'ssssssssssssss')
                        $('#select').html(_html);
                        $('#select').selectpicker('refresh');
                    }else{
                        layer.msg('数据获取失败');
                    }
                },
                error:function(){
                    statsData = false;
                    layer.msg('数据获取失败');
                }
            });
        });




    })
    function selectChange(){
        refreshs('refresh')
    }
    function statsInit(id,startdate,enddate){
        var _data ={
            platformId:id,
            startDate:startdate,
            endDate:enddate
        };

        if(!statsData){
            indexloading = layer.load(2);
            statsData = true;
            //被封域名
            $.ajax({
                type : "POST",
                url : baseURL+"domainsta/findLockedDomainStaSearchData",
                data:JSON.stringify(_data),
                contentType:'application/json',
                success: function(data) {
                    layer.close(indexloading);
                    statsData = false;
                    if(data.code==0){
                        setData('stats7_num','#stats7',data.result.totalCount,data.result.riseOrFall,data.result.countRate)
                    }else{
                        layer.msg('数据获取失败');
                    }
                },
                error:function(){
                    layer.close(indexloading);
                    statsData = false;
                    layer.msg('数据获取失败');
                }
            });
            //转发文章
            $.ajax({
                type : "POST",
                url : baseURL+"statis/getForwarArticleEveryDayTotal",
                data:JSON.stringify(_data),
                contentType:'application/json',
                success: function(data) {
                    if(data.code==0){
                        setData('stats4_num','#stats4',data.result.totalCount,data.result.riseOrFall,data.result.countRate)
                    }else{
                        layer.msg('数据获取失败');
                    }
                }
            });
            //新增文章
            $.ajax({
                type : "POST",
                url : baseURL+"statis/getNewArticleEveryDayTotal",
                data:JSON.stringify(_data),
                contentType:'application/json',
                success: function(data) {
                    if(data.code==0){
                        setData('stats6_num','#stats6',data.result.totalCount,data.result.riseOrFall,data.result.countRate)
                    }else{
                        layer.msg('数据获取失败');
                    }
                }
            });
            //新增用户
            $.ajax({
                type : "POST",
                url : baseURL+"statis/getNewUserStatis",
                data:JSON.stringify(_data),
                contentType:'application/json',
                success: function(data) {
                    if(data.code==0){
                        setData('stats2_num','#stats2',data.result.totalCount,data.result.riseOrFall,data.result.countRate)
                    }else{
                        layer.msg('数据获取失败');
                    }
                }
            });
            //活跃用户
            $.ajax({
                type : "POST",
                url : baseURL+"statis/getActiveUserStatis",
                data:JSON.stringify(_data),
                contentType:'application/json',
                success: function(data) {
                    if(data.code==0){
                        setData('stats3_num','#stats3',data.result.totalCount,data.result.riseOrFall,data.result.countRate)
                    }else{
                        layer.msg('数据获取失败');
                    }
                }
            });
            //ip数
            $.ajax({
                type : "POST",
                url : baseURL+"ip/getIpDailyStaData",
                data:JSON.stringify(_data),
                contentType:'application/json',
                success: function(data) {
                    if(data.code==0){
                        //ip信息
                        setData('stats5_num','#stats5',data.result.totalCount,data.result.ipCountRiseOrFall,data.result.ipCountRate)

                    }else{
                        layer.msg('数据获取失败');
                    }
                }
            });
            //ip数
            $.ajax({
                type : "POST",
                url : baseURL+"articleStatis/getForwarArticlePeopleEveryDayTotal",
                data:JSON.stringify(_data),
                contentType:'application/json',
                success: function(data) {
                    if(data.code==0){
                        //ip信息
                        setData('stats8_num','#stats8',data.result.totalCount,data.result.riseOrFall,data.result.countRate)

                    }else{
                        layer.msg('数据获取失败');
                    }
                }
            });
            //转发文章次数
            $.ajax({
                type : "POST",
                url : baseURL+"articleStatis/getSharedArticleNumEveryDayTotal",
                data:JSON.stringify(_data),
                contentType:'application/json',
                success: function(data) {
                    if(data.code==0){
                        //ip信息
                        setData('stats9_num','#stats9',data.result.totalCount,data.result.riseOrFall,data.result.countRate)

                    }else{
                        layer.msg('数据获取失败');
                    }
                }
            });
        }

    }

    function isInteger(obj) {
        return Math.round(obj) == obj   //是整数，则返回true，否则返回false
    }


    function setData(id,ids,totalCount,riseOrFall,countRate){
        var demo = new CountUp(id, 0, transformNum(totalCount),isInteger(transformNum(totalCount))?0:1, 2, {
            useEasing: true,
            useGrouping: true,
            separator: ',',
            decimal: '.',
            suffix: (totalCount+'').length>=5?'万':''
        });
        demo.start();

        if(riseOrFall==1){
            $(ids+' .stats_contrast_num').html('+'+countRate+'%').css({'color':'red'})
            $(ids+' .glyphicon').removeClass('glyphicon-arrow-down ').addClass('glyphicon-arrow-up ')
        }else{
            $(ids+' .stats_contrast_num').html(countRate+'%').css({'color':'#76d471'});
            $(ids+' .glyphicon').removeClass('glyphicon-arrow-up ').addClass('glyphicon-arrow-down ')
        }


    }
    function transformNum(e,b){
        if(String(e).length<=4){
            return String(e);
        }else{
            var _e
            if(((parseFloat(e)/10000).toString()).indexOf('.')!=-1){
                _e = (parseFloat(e)/10000).toFixed(1);
            }else{
                _e = (parseFloat(e)/10000)
            }
            return _e+ (b==1?'万':'');
        }
    }
</script>